{% extends "_layouts/examples.html" %}
{% block title %}Switch{% endblock %}

{% block standalone_css %}patterns_switch{% endblock %}

{% block content %}
<label class="p-switch">
    <input type="checkbox" class="p-switch__input" checked role="switch"/>
    <span class="p-switch__slider"></span>
    <span class="p-switch__label">On</span>
</label>
<label class="p-switch">
    <input type="checkbox" class="p-switch__input" role="switch"/>
    <span class="p-switch__slider"></span>
    <span class="p-switch__label">Off</span>
</label>
<label class="p-switch">
    <input type="checkbox" class="p-switch__input" checked role="switch" disabled/>
    <span class="p-switch__slider"></span>
    <span class="p-switch__label">On disabled</span>
</label>
<label class="p-switch">
    <input type="checkbox" class="p-switch__input" role="switch" disabled/>
    <span class="p-switch__slider"></span>
    <span class="p-switch__label">Off disabled</span>
</label>
{% endblock %}
